表のサイズを指定する
今週は、ホームページ作成の初心者を対象にホームページの基本を紹介します。テーマは「表のサイズを指定する」です。「TABLE」タグを使って作成した表は、セル内の文字数により自動的にサイズが変更されますが、これを自分で指定することも可能です。

→ 表全体のサイズを指定する
 
表全体のサイズは、「TABLE」タグにwidth属性、height属性を追加すると指定できます。ただし、height属性は一般的なHTMLで認められている属性ではないため、通常はwidth属性だけを記述し、表の幅だけを指定します。指定方法には“ピクセル数を数値で指定する”と“ウィンドウサイズとの割合を%（パーセント）で指定する”の2種類が用意されています。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■表のサイズを指定しなかった場合<BR>
<TABLE border="2">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田　健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木　康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤　真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元　正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田　祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■表のサイズを指定した場合<BR>
<TABLE border="2" width="300">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田　健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木　康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤　真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元　正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田　祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>

</BODY>

</HTML>


→ セルのサイズを指定する
 
「TD」タグや「TH」タグにwidth属性、height属性を追加すると、各セルのサイズを指定できるようになります。ただし、表全体の幅を指定している場合は、各セルの幅の合計が表全体の幅と一致しなければいけません。セルのサイズはピクセル数で指定するのが基本ですが、幅（width属性）は表全体に対する割合を%（パーセント）で指定することも可能です。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■表、セルのサイズを指定した場合<BR>
<TABLE border="2" width="300">
  <TR>
    <TH width="130" height="40">氏名</TH>
    <TH width="40" height="40">学年</TH>
    <TH width="130" height="40">担当</TH>
  </TR>
  <TR>
    <TD width="130" height="25">山田　健一</TD>
    <TD width="40" height="25">3</TD>
    <TD width="130" height="25">大道具</TD>
  </TR>
  <TR>
    <TD width="130" height="25">鈴木　康子</TD>
    <TD width="40" height="25">2</TD>
    <TD width="130" height="25">美術</TD>
  </TR>
  <TR>
    <TD width="130" height="25">常盤　真司</TD>
    <TD width="40" height="25">1</TD>
    <TD width="130" height="25">照明</TD>
  </TR>
  <TR>
    <TD width="130" height="25">宮元　正子</TD>
    <TD width="40" height="25">2</TD>
    <TD width="130" height="25">衣装</TD>
  </TR>
  <TR>
    <TD width="130" height="25">栗田　祐二</TD>
    <TD width="40" height="25">3</TD>
    <TD width="130" height="25">小道具</TD>
  </TR>
</TABLE>

</BODY>

</HTML>


→ セルの余白を指定する
 
通常、セル内に記述された文字は、セルの左上にピッタリくっついて表示されますが、この余白を自分で指定することも可能です。余白を指定する場合は、「TABLE」タグにcellpadding属性を追加し、ピクセル数で余白を指定します。そのほか、セルとセルの間隔を指定するcellspacing属性も用意されています。こちらも間隔をピクセル数で指定します。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■セルの余白と間隔を指定した場合<BR>
<TABLE border="2" width="300" cellpadding="5"cellspacing="10">
  <TR>
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田　健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木　康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤　真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元　正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田　祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>

</BODY>

</HTML>


PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��